 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title></title>
 	<link rel="stylesheet" href="./css/reset.css" />
 	<link rel="stylesheet" href="./css/style.css" />
 </head>
 <body>
 	<div class="wrapper">
		<div class="header">
			<div class="container">
				<div class="logo">
					<h1>Spirit8</h1>
				</div>
				<a class="mobile-nav" href="#nav">
					<span></span>
					<span></span>
					<span></span>
				</a>
				<div class="nav" id="nav">
					<ul>
						<li><a href="#">HOME</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">SERVICES</a></li>
						<li><a href="#">portfolio</a></li>
						<li><a href="#">testimonials</a></li>
						<li><a href="#">CONTACT</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="banner text_center">
			<div class="container">
				<h2 class="A fz44">wELCOME on <span class="l">spirit8</span></h2>
				<p class="cl_fff fz20 ff-opbd">We are a digital agency with years of experience and with extraordinary people </p>
				<div class="banner-nav">
					<img src="./images/banner_img.png" alt="">
				</div>
			</div>
		</div>
		<div class="about">
			<div class="container">
				<div class="about-mac left"><img src="./images/about-mac.png" alt=""></div>
				<div class="about-content right">
					<span class="A fz20 ff-op">about us</span><br/>
					<div class="cl">
						<p class="A fz34 ff-op abu">Some words</p> <span class="A fz34 ff-opbd">about us</span>
					</div>
					<p class="fz18 ff-op desc">We love building and rebuilding brands through our  specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.</p>
					<ul>
						<li><span>Mission</span> - We deliver uniqueness and quality</li>
						<li><span>Skills</span> - Delivering fast and excellent results</li>
						<li><span>Clients</span> - Satisfied clients thanks to our experience</li>
					</ul>
					<div class="our-work">
						<span class="ff-semi fz12 browse">Browse our work</span>
					</div>
				</div>
			</div>
		</div>
		<div class="team">
			<div class="container">
				<h2 class="ff-semi fz44 cl_fff"><span class="ff-oplt fz44 cl_fff">Meet</span> our team</h2>	
				<div class="team-face ff-op cl_fff">
					<div class="face-box">
						<div class="face">
							<img src="" alt="">
						</div>
						<h3 class=fz20 B">Jason Statham</h3>
						<span class="fz16">Knife designer</span>
						<p class="fz14">Do not seek to change what has come before. Seek to create that which has not.</p>
					</div>
					<div class="face-box">
						<div class="face">
							<img src="" alt="">
						</div>
						<h3 class=fz20 B">Jason Statham</h3>
						<span class="fz16">Knife designer</span>
						<p class="fz14">Do not seek to change what has come before. Seek to create that which has not.</p>
					</div>
					<div class="face-box">
						<div class="face">
							<img src="" alt="">
						</div>
						<h3 class=fz20 B">Jason Statham</h3>
						<span class="fz16">Knife designer</span>
						<p class="fz14">Do not seek to change what has come before. Seek to create that which has not.</p>
					</div>
					<div class="face-box">
						<div class="face">
							<img src="" alt="">
						</div>
						<h3 class=fz20 B">Jason Statham</h3>
						<span class="fz16">Knife designer</span>
						<p class="fz14">Do not seek to change what has come before. Seek to create that which has not.</p>
					</div>
				</div>
				<div class="dots">
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
		</div>
		<div class="services">
			<div class="container">
				<h2 class="ff-semi fz44"><span class="ff-oplt fz44">take a look</span> at our services</h2>	
				<p class="ff-opitc fz16 desc">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
				<div class="services-bigbox">
					<div class="services-box cl_222">
						<div class="services-imgbox">
							<img src="./images/services_001.png" alt="" />
						</div>
						<span class="ff-semi fz25">Web design</span>
						<p class="ff-op fz14">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
					</div>
					<div class="services-box cl_222">
						<div class="services-imgbox">
							<img src="./images/services_002.png" alt="" />
						</div>
						<span class="ff-semi fz25">Web design</span>
						<p class="ff-op fz14">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
					</div>
					<div class="services-box cl_222">
						<div class="services-imgbox">
							<img src="./images/services_003.png" alt="" />
						</div>
						<span class="ff-semi fz25">Web design</span>
						<p class="ff-op fz14">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
					</div>
					<div class="services-box cl_222">
						<div class="services-imgbox">
							<img src="./images/services_004.png" alt="" />
						</div>
						<span class="ff-semi fz25">Web design</span>
						<p class="ff-op fz14">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="clients">
			<div class="container">
				<h2 class="ff-semi fz44 cl_fff"><span class="ff-oplt fz44 cl_fff">some of </span>our cilents</h2>	
				<div class="clients-img text_center">
					<a href="" class="clients-sprite clients-1"></a>
					<a href="" class="clients-sprite clients-2"></a>
					<a href="" class="clients-sprite clients-3"></a>
					<a href="" class="clients-sprite clients-4"></a>
					<a href="" class="clients-sprite clients-5"></a>
				</div>
				<div class="dots">
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
		</div>
		 <div class="work">
			<div class="container">
				<h2 class="ff-semi fz44"><span class="ff-oplt fz44">take a look at </span>our work</h2>
				<p class="ff-opitc fz16 desc">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
				<div class="work-imgbox">
					<div class="img-nav">
						<p class="left_nav ff-semi left">Filter by type</p>
						<ul>
							<li>
								<a href="" style="text-align: right;padding-right: 15px;">All</a>
							</li>
							<li>
								<a href="">Web design</a>
							</li>
							<li>
								<a href="" style="padding: 0 5px;">Mobile design</a>
							</li>
							<li>
								<a href="">Photograpy</a>
							</li>
						</ul>
					</div>
					<div class="img-box">
						<div class="img-xl-1">
							<img src="./images/work.png" alt="" />
						</div>
						<div class="img-xl-1">
							<img src="./images/work.png" alt="" />
						</div>
						<div class="img-xl-1">
							<img src="./images/work.png" alt="" />
						</div>
						<div class="img-xl-1">
							<img src="./images/work.png" alt="" />
						</div>
						<div class="img-xl-2">
							<img src="./images/work2.png" alt="" />
						</div>
						<div class="img-xl-2">
							<img src="./images/work2.png" alt="" />
						</div>
						<div class="img-xl-2">
							<img src="./images/work2.png" alt="" />
						</div>
						<div class="img-xl-2">
							<img src="./images/work2.png" alt="" />
						</div>
						<div class="img-xl-3">
							<img src="./images/work3.png" alt="" />
						</div>
						<div class="img-xl-3">
							<img src="./images/work3.png" alt="" />
						</div>
						<div class="img-xl-3">
							<img src="./images/work3.png" alt="" />
						</div>
						<div class="img-xl-3">
							<img src="./images/work3.png" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="our-clients">
			<div class="container">
				<h2 class="ff-semi fz44 cl_fff"><span class="ff-oplt fz44 cl_fff">our clients’ </span>testimonials</h2>
				<p class="ff-semi fz18 desc">This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
				<p class="ff-semi inc">Dean Martin, <span class="ff-oplt inc">CEO Acme Inc.</span></p>
				<div class="dots">
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
		</div>
		<div class="contact">
			<div class="container">
				<h2 class="ff-oplt fz44"><span class="ff-semi fz44">feel free to </span>contact us</h2>
				<p class="ff-opitc fz16 desc">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. </p>
					<form action="#" method="post" enctype="multipart/form-data">
						<div class="form">
							<div class="name left">
								<p>Name<span>*</span></p>
								<input type="text" class="text" id="name" required />
							</div>
							<div class="email right">
								<p>Email address<span>*</span></p>
								<input type="text" class="text" required />
							</div>
							<div class="message">
								<p>Email address<span>*</span></p>
								<textarea></textarea>
							</div>
							<input type="submit" class="submit" value="SEND" />
						</div>

				</div>
			</div>
		</div>
		<div class="footer">
			<div class="container">
				<p>ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8 &amp; <a class="mylove">Revised By &hearts; MIse3uc &hearts;</a></p>
				<div class="shares">
					<a href="" class="share-sprite share01"></a>
					<a href="" class="share-sprite share02"></a>
					<a href="" class="share-sprite share03"></a>
					<a href="" class="share-sprite share04"></a>
					<a href="" class="share-sprite share05"></a>
				</div>
			</div>
		</div> 
 	</div>
 </body>
 </html>